<template>
<transition v-on:after-enter="afterEnter" v-on:before-leave="beforeLeave" name="fade">
    <div class="tw_wrape">
        <div ref="tw_inner" class="tw_inner">
            <div class="tw_top">
                <div class="tw_title">选择日期</div>
                <div class="tw_week">
                    <div class="tw_between_color">日</div>
                    <div>一</div>
                    <div>二</div>
                    <div>三</div>
                    <div>四</div>
                    <div>五</div>
                    <div class="tw_between_color">六</div>
                </div>
                <div class="cancel"  @click="cancel()">取消</div>
            </div>
            <div class="tw_list_wrape">
                <div v-for="(items,j) in source" :key="j">
                    <div class="item_header">{{items.date}}</div>
                    <div class="tw_date_list">
                        <div class="tw_date_item" :class="{'tw_between_color' : item.recess, 'chooseItem' : item.select, 'rangeItem' : item.inRange, 'default_color': item.outTime}" v-for="(item,i) in items.source" v-bind:key="i" @click="selectTime(item.click,item.time,item.outTime,j,i)">
                            {{item.day}}
                            <div class="tw_tag" v-if="item.select">
                                {{item.tag}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</transition>
</template>
<script>
export default {
    name: 'my-date',
    data(){
        return{
            source:[],
            startTime:null,
            endTime:null,
        }
    },
    mounted(){
        this.initDate();
    },
    methods:{
        initDate(){
            let allSource = [];
            let c_time = new Date(); // 获取当前时间;
            let c_year= c_time.getFullYear(); // 获取当前年份;
            let c_month = c_time.getMonth()+1; // 获取当前月份;
            let c_date = c_time.getDate(); // 获取今天几号;
            let c_day = c_time.getDay(); // 获取今天周几;

            for(let j=c_month; j<c_month + 6; j++){
                let t_date = new Date(c_year,j,0);
                let t_days = t_date.getDate(); // 获取这个月有几天
                let startWeek = new Date(c_year,j-1,1).getDay(); //当月第一天是周几
                let items = {};
                let arr = [];
                for(let i=0; i<t_days+startWeek; i++){
                    let obj = {};
                    obj.day = "";
                    obj.time = "1937-3-18";
                    obj.click = false;
                    obj.recess = false;
                    obj.select = false;
                    obj.inRange = false;
                    obj.outTime = false;
                    obj.tag = "";
                    if(i>=startWeek){
                        obj.day = i-startWeek+1;
                        obj.time = this.formatDateSource(c_year,j,i-startWeek+1);
                        if(i+1 == c_date+startWeek && j == c_month){
                            obj.day = "今天";
                        }
                        if(i+1 < c_date+startWeek && j <= c_month){
                             obj.outTime = true;
                        }
                        obj.click = true;
                        if(i%7 == 0 || (i+1)%7 == 0){
                            obj.recess = true;
                        }
                    }
                    arr.push(obj);
                }
                items.source = arr;
                items.date = this.formatDateTitle(c_year,j);
                allSource.push(items);
            }
            this.source = allSource;
        },
        selectTime(click,time,outTime,j,i){
            if(click && !outTime){
                this.source[j].source[i].select = true;
                if(!this.startTime){
                    this.startTime = time;
                    this.source[j].source[i].tag = "入住";
                }else{
                    let status = this.compareTime(this.startTime,time);
                    switch(status){
                        case 1 :
                        this.endTime = this.startTime;
                        this.startTime = time;
                        this.source[j].source[i].tag = "离店";
                        break;
                        case 2 :
                        this.endTime = time;
                        break;
                        default :
                        return;
                    }
                }
                if(this.startTime && this.endTime){
                    let days = this.DateDiff(this.startTime,this.endTime);
                    this.sourceFiltrate();
                    let obj = {
                        days : days,
                        startTime : this.startTime,
                        endTime : this.endTime
                    }
                    this.$emit('getDays',obj);
                    this.$emit('cancel');
                }
            }
            return;
        },
        cancel(){
            this.$emit('cancel');
        },
        afterEnter(){
            this.$refs.tw_inner.classList.toggle('active');
        },
        beforeLeave(){
            this.$refs.tw_inner.classList.toggle('active');
        },
        formatDateTitle(y,m){
            let c_y = y;
            let c_m = m;
            if(m>12){
                c_m = m-12;
                c_y = y+1;
            }
            c_m = c_m > 9 ? c_m :"0"+c_m;
            return c_y + "年" + c_m + "月";
        },
        formatDateSource(y,m,d){
            let c_y = y;
            let c_m = m;
            if(m>12){
                c_m = m-12;
                c_y = y+1;
            }
            return c_y + "-" + c_m + "-" + d;
        },
        compareTime(startTime,endTime){

            let sTimeStr = startTime.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
			let sTime = new Date(sTimeStr[0],(sTimeStr[1]-1),sTimeStr[2]);
			let eTimeStr = endTime.split("-");
			let eTime = new Date(eTimeStr[0],(eTimeStr[1]-1),eTimeStr[2]);

            if(sTime.getTime() > eTime.getTime()){
                return 1;
            } else if(sTime.getTime() < eTime.getTime()){
                return 2;
            }
            return 3;
        },
        DateDiff(date1 , date2){
			let date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
			let date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
			let date2Str = date2.split("-");
			let date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
			let t1 = date1Obj.getTime();
			let t2 = date2Obj.getTime();
			let dateTime = 1000*60*60*24; //每一天的毫秒数
			let minusDays = Math.floor(((t2-t1)/dateTime));//计算出两个日期的天数差
			let days = Math.abs(minusDays);//取绝对值
			return days;
        },
        timeRange(time){
            let startTime = this.startTime;
            let ensTime = this.endTime;
            let startStr = startTime.split("-");
            let enstStr = ensTime.split("-");
            let timeStr = time.split("-");
            let t1 = new Date(startStr[0],(startStr[1]-1),startStr[2]);
            let t2 = new Date(enstStr[0],(enstStr[1]-1),enstStr[2]);
            let t0 = new Date(timeStr[0],(timeStr[1]-1),timeStr[2]);
            if(t0>t1 && t0<t2){
                return true;
            }
            return false;
        },
        startStop(time){
            let startTime = this.startTime;
            let endTime = this.endTime;
            if(time == startTime){
                return "入住";
            }
            if(time == endTime){
                return "离店";
            }
            return "";
        },
        sourceFiltrate(){
            
            let source = this.source;
            let startTime = this.startTime;
            let ensTime = this.endTime;
            
            for(let i=0; i<source.length; i++){
                let items = source[i].source;
                for(let j=0; j<items.length; j++){
                    let item = items[j];
                    if(this.timeRange(item.time)){
                        item.inRange = true;
                    }else{
                        item.inRange = false;
                    }
                    item.tag = this.startStop(item.time);
                    if(item.tag == ""){
                        item.select = false;
                    }
                }
            }
        }
    }    
}
</script>
<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
    .tw_wrape{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        box-sizing: border-box;
        padding-top: 20vh;
        color: #333333;
    }
    .tw_top{
        position: relative;
        width: 100%;
    }
    .cancel{
        font-size: 30px;
        position: absolute;
        left: 20px;
        top: 0;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
    }
    .tw_title{
        font-size: 34px;
        line-height: 80px;
        font-weight: 500;
    }
    .tw_week{
        font-size: 26px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 60px;
    }
    .tw_30{
        font-size: 0.3rem;
    }
    .tw_between_color{
        color: #FF3C00;
    }
    .tw_inner{
        background: #ffffff;
        position: relative;
        height: 80vh;
        width: 100vw;
        transform: translateY(80vh);
        transition: all .5s;
    }
    .active{
        transform: translateY(0);
    }
    .item_header{
        height: 63px;
        font-size: 30px;
        text-align: center;
        line-height: 63px;
        background: #F1F2F6;
    }
    .tw_list_wrape{
        width: 100%;
        position: absolute;
        top: 139px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .tw_date_list{
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .tw_date_item{
        width: 106px;
        height: 106px;
        position: relative;
        text-align: center;
        line-height: 106px;
        font-size: 32px;
        overflow: hidden;
        border-radius: 6px; /*no*/
    }
    .tw_tag{
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        bottom: 0;
        left: 0;
    }
    .default_color{
        color: #999999!important;
    }
    .tw_date_list .chooseItem{
        background: #4289FF;
        color: #ffffff;
    }
    .tw_date_list .rangeItem{
        background: rgba(66,137,255,0.4);
        color: #333333;
    }
</style>
